<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import http_posts from '@/api/posts.js'
import http_login from '@/api/login.js'
import router from '@/router/index.js'

const route = useRoute()

// 函数
// 获得在招聘职位数量
const getPostsInfo = async (companyId) => {
  window.scrollTo(0, 0)
  const result = await http_posts.getByCompanyIdAndPage(
    companyId,
    page.value,
    size.value
  )
  if (result.code === 200) {
    postsInfoList.value = result.data.records
    for (let i = 0; i < postsInfoList.value.length; i++) {
      getUserInfo(postsInfoList.value[i].publisherId)
    }
    total.value = result.data.total
  }
}
// 获得用户信息
const getUserInfo = async (userId) => {
  const result = await http_login.getUserInfobyId(userId)
  if (result.code === 200) {
    userInfoList.value.push(result.data)
  }
}
// 页码改变
const handleCurrentChange = (number) => {
  page.value = number
  getPostsInfo(route.query.companyId)
}
// 生命周期函数
onMounted(() => {
  getPostsInfo(route.query.companyId)
})

// 变量
const postsInfoList = ref([]) //公司职位数组
const page = ref(1) //职位分页查询当前页数
const size = ref(10) //职位分页查询数量
const total = ref(0) //总数量
const userInfoList = ref([]) //用户信息数组
</script>

<template>
  <div>
    <div style="font-weight: 900; font-size: 20px">在招职位</div>
    <div>
      <div
        class="item"
        v-for="(item, index) in postsInfoList"
        :key="item.postsId"
        @click="
          router.push({
            path: '/postsInfo',
            query: { postsId: item.postsId }
          })
        "
      >
        <div style="margin-top: 12px; margin-left: 30px">
          <div class="name">{{ item.name }}</div>
          <div style="margin-top: 10px">
            <span style="font-size: 18px; font-weight: 900; color: red">{{
              item.salary
            }}</span>
            <el-tag
              style="background-color: #ddd; margin-left: 10px"
              size="large"
              class="ml-2"
              type="info"
              >{{ item.workExperience }}</el-tag
            ><el-tag
              style="background-color: #ddd; margin-left: 10px"
              size="large"
              class="ml-2"
              type="info"
              v-if="item.academicQualifications == 0"
              >无学历要求</el-tag
            ><el-tag
              style="background-color: #ddd; margin-left: 10px"
              size="large"
              class="ml-2"
              type="info"
              v-if="item.academicQualifications == 1"
              >高中</el-tag
            ><el-tag
              style="background-color: #ddd; margin-left: 10px"
              size="large"
              class="ml-2"
              type="info"
              v-if="item.academicQualifications == 2"
              >大专</el-tag
            ><el-tag
              style="background-color: #ddd; margin-left: 10px"
              size="large"
              class="ml-2"
              type="info"
              v-if="item.academicQualifications == 3"
              >本科</el-tag
            ><el-tag
              style="background-color: #ddd; margin-left: 10px"
              size="large"
              class="ml-2"
              type="info"
              v-if="item.academicQualifications == 4"
              >研究生</el-tag
            >
            <el-tag
              style="background-color: #ddd; margin-left: 10px"
              size="large"
              class="ml-2"
              type="info"
              v-if="item.academicQualifications == 4"
              >博士</el-tag
            >
          </div>
        </div>
        <div style="display: flex; position: absolute; right: 40px; top: 20px">
          <div>
            <el-avatar :size="50" :src="userInfoList[index].avatarImage" />
          </div>
          <div class="message">立即沟通</div>
          <div class="info" style="margin-left: 15px; font-size: 16px">
            <div style="margin-top: 3px">
              {{ userInfoList[index].username }}
            </div>
            <div style="margin-top: 3px">{{ userInfoList[index].duties }}</div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 15px">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="total"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item {
  width: 100%;
  background-color: #fff;
  height: 85px;
  border-radius: 15px;
  margin-top: 15px;
  display: flex;
  position: relative;
  cursor: pointer;
  transition: background-color 0.5s ease; /* 添加过渡效果 */

  .name {
    font-size: 17px;
    transition: color 0.5s ease; /* 添加过渡效果 */
  }
  .info {
    width: 90px;
    display: block;
  }
  .message {
    width: 90px;
    height: 30px;
    background-color: #00a6a7;
    color: #fff;
    border-radius: 7px;
    line-height: 30px;
    text-align: center;
    margin-left: 15px;
    margin-top: 10px;
    display: none;
  }
}
.item:hover {
  background-color: #f6f6f6;
  .name {
    color: #00a6a7;
  }
  .info {
    display: none;
  }
  .message {
    display: block;
  }
}
</style>
